<section layout="row" class="info-list-detail">
    <h2 flex="20">{/'Basic Information' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <div flex="30"><h5>{/'Scope' | translate/}</h5></div>
        <div flex="70"><p>{/networkConfigCtrl.network.Scope/}</p></div>
        <div flex="30"><h5>{/'Support IPv6' | translate/}</h5></div>
        <div flex="70">
            <p ng-class="{'no-info': !networkConfigCtrl.network.EnableIPv6}">
                {/networkConfigCtrl.network.EnableIPv6 ? 'YES' : 'NO' | translate/}
            </p>
        </div>
        <div flex="30"><h5>{/'Host-Only network' | translate/}</h5></div>
        <div flex="70">
            <p ng-class="{'no-info': !networkConfigCtrl.network.Internal}">
                {/networkConfigCtrl.network.Internal ? 'YES' : 'NO' | translate/}
            </p>
        </div>
        <div flex="30"><h5>{/'Options' | translate/}</h5></div>
        <div flex="70" dm-empty-display="networkConfigCtrl.network.Options" dm-empty-text="{/'Not configured' | translate/}">
            <ul>
                <li data-ng-repeat="(key, value) in networkConfigCtrl.network.Options">{/key/} : {/value/}</li>
            </ul>
        </div>
        <div flex="30"><h5>{/'Labels' | translate/}</h5></div>
        <div flex="70" dm-empty-display="networkConfigCtrl.network.Labels" dm-empty-text="{/'Not configured' | translate/}">
            <ul>
                <li data-ng-repeat="(key, value) in networkConfigCtrl.network.Labels">{/key/} : {/value/}</li>
            </ul>
        </div>
    </div>
</section>

<section layout="row" class="info-list-detail">
    <h2 flex="20">{/'Address Management' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap dm-empty-display="network.IPAM.Config[0]">
        <div flex="30"><h5>{/'Subnet Mask' | translate/}</h5></div>
        <div flex="70"><p>{/networkConfigCtrl.network.IPAM.Config[0].Subnet/}</p></div>
        <div flex="30"><h5>{/'Gateway IP' | translate/}</h5></div>
        <div flex="70"><p>{/networkConfigCtrl.network.IPAM.Config[0].Gateway/}</p></div>
    </div>
</section>

<section layout="row" class="info-list-detail">
    <h2 flex="20">{/'Connect containers' | translate/}</h2>
    <div flex="80" dm-empty-display="networkConfigCtrl.network.Containers">
        <table id="net-config-table" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th>{/'Container Name' | translate/}</th>
                <th>{/'IPv4 address' | translate/}</th>
                <th>{/'IPv6 address' | translate/}</th>
                <th>{/'MAC Address' | translate/}</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(key, value) in networkConfigCtrl.network.Containers">
                <td>
                    <p class="ellipsis">{/value.Name/}
                        <md-tooltip md-direction="top">{/value.Name/}</md-tooltip>
                    </p>
                </td>
                <td><span ng-class="{'no-info': !value.IPv4Address}">{/value.IPv4Address || ('Not configured' | translate)/}</span></td>
                <td><span ng-class="{'no-info': !value.IPv6Address}">{/value.IPv6Address || ('Not configured' | translate)/}</span></td>
                <td><span ng-class="{'no-info': !value.MacAddress}">{/value.MacAddress || ('Not configured' | translate)/}</span></td>
            </tr>
            </tbody>
        </table>
    </div>
</section>
